var generateCSS = function(){
  var output_div = $('#css');
  output_div.text('');
  for(var selector in styles){
    //console.log(idx,item);
    if (styles.hasOwnProperty(selector)) {
      var rules = [];
      // do stuff
      //console.log(selector,styles[selector]);
      for(var rule in styles[selector]){
        //console.log(idx,item);
        if (styles[selector].hasOwnProperty(rule)) {
          rules.push(rule+':'+styles[selector][rule]);
        }
      }
    }
    output_div.append(selector+'{\n'+rules.join(';\n')+'\n}\n');

  }
};
var styles = {};

var setHeaderHeight = function(height){
  height = height.replace('px','');
  var style =genStyle('#header','height',height +'px !important');
  saveStyle(style,dashboardCreateCssRule);
  $('#header_height_val').text(height +'px');
};
var setHeaderLogoHeight = function(height){
  height = height.replace('px','');
  var style = genStyle('#header-logo','height', height +'px !important');
  saveStyle(style,dashboardCreateCssRule);
  $('#header_logo_height').val(height+'px');
};
var setMenuTopPadding = function(padding){
  padding = padding.replace('px','');
  var style3 = genStyle('#menu','padding-top', padding +'px !important');
  saveStyle(style3,dashboardCreateCssRule);
  $('#header_menu_top_padding_value').val(padding+'px');
};
var setMenuTextColor = function(color){
  var style3 = genStyle('.menu-item .menu-item-title,.menu-item .menu-item-no-drop','color', color +' !important');
  saveStyle(style3,dashboardCreateCssRule);
};
var setMenuTextShadow = function(shadow){
  selector = '.menu-item .menu-item-title,.menu-item .menu-item-no-drop';
  if(shadow=='none'){
    var style3 = genStyle(selector,'text-shadow', '0px 0px 0px !important');
  }else{
    var style3 = genStyle(selector,'text-shadow', '0px 0px 1px '+ shadow +' !important');
  }
  saveStyle(style3,dashboardCreateCssRule);
};

var setMenuLeftMargin = function(margin){
  var style = genStyle('#menu','margin-left', margin +'px !important');
  saveStyle(style,dashboardCreateCssRule);
  $('#header_menu_left_margin_value').val(margin+'px');
};

var saveStyle = function(style_list,callback){
  var l = [];
  if (style_list instanceof Array) {
    //alert('value is Array!');
    l = style_list;
  } else {
    l.push(style_list);
  }
  $(l).each(function(idx,item){
    console.log(item,idx);
    if(styles[item.selector]==undefined){
      styles[item.selector] = {};
    }
    styles[item.selector][item.rule] = item.value;
    callback(item.selector,item.rule+":"+item.value);
  });
  generateCSS();
};

var genStyle = function(selector,rule,value){
  return {selector:selector,rule:rule,value:value};
};

$(document).ready(function(){

  $('#login_bg_image').change(function(){
    var style = genStyle('#modal-box-inner','background','url('+$('#login_bg_image').val()+') center no-repeat transparent !important');
    saveStyle(style,loginCreateCssRule);

    var style2 = genStyle('#modal-box-inner>h1','background', 'none !important');
    saveStyle(style2,loginCreateCssRule);

  });

  $('#login_bg_position_y').change(function(){
    var style = genStyle('#modal-box-inner','background-position-y',$('#login_bg_position_y').val()+' !important');
    saveStyle(style,loginCreateCssRule);
  });

  $('#login_bg_height').change(function(){
    var style = genStyle('#modal-box-inner>h1','height',$('#login_bg_height').val()+' !important');
    saveStyle(style,loginCreateCssRule);
  });

  $('#login_bg_color').change(function(){
    var style1 = genStyle('#modal-box','background','none !important');
    var style2 = genStyle('#modal-box','background-color',$('#login_bg_color').val()+' !important');
    saveStyle(style1,loginCreateCssRule);
    saveStyle(style2,loginCreateCssRule);
    saveStyle(style1,registerCreateCssRule);
    saveStyle(style2,registerCreateCssRule);
  });

  $('#login_text_color').change(function(){
    var style = genStyle('#modal-box','color',$('#login_text_color').val() +' !important');
    saveStyle(style,loginCreateCssRule);
    saveStyle(style,registerCreateCssRule);
  });

  $('#login_link_color').change(function(){
    var style = genStyle('#modal-box a','color',$('#login_link_color').val() +' !important');
    saveStyle(style,loginCreateCssRule);
    saveStyle(style,registerCreateCssRule);
  });

  $('#header_bg_image').change(function(){
    var image = $('#header_bg_image').val();
    
    console.log('image here',image);
    if(image=='none'){
      var style = genStyle('#header','background-image','none !important');
    }else{
      var style = genStyle('#header','background-image','url('+image +') !important');
    }

    saveStyle(style,dashboardCreateCssRule);
  });
  $('#header_bg_color').change(function(){
    var style = genStyle('#header','background-color',$('#header_bg_color').val() +' !important');
    saveStyle(style,dashboardCreateCssRule);
  });
  $('#header_border_bottom').change(function(){
    var style = genStyle('#header','border-bottom',$('#header_border_bottom').val()+' !important');
    saveStyle(style,dashboardCreateCssRule);
  });
  $('#header_logo').change(function(){
    var style = genStyle('#header-logo','background-image','url('+$('#header_logo').val() +') !important');
    saveStyle(style,dashboardCreateCssRule);
  });
  $('#header_logo_size').change(function(){
    var style = genStyle('#header-logo','background-size', $('#header_logo_size').val() +' !important');
    saveStyle(style,dashboardCreateCssRule);
    var sizes = $('#header_logo_size').val().split(' ');
    var width = (sizes.length>1) ? parseInt(sizes[0].replace('px',''))+110 : false;
    var height = sizes[1];
    if(width){
      // Also adjust the header logo width
      var style2 = genStyle('#header-logo','width', width +'px !important');
      saveStyle(style2,dashboardCreateCssRule);
      // Also adjust the menu width
      // 
      /*
      var style2_2 = genStyle('#menu','margin-left', width +'px !important');
      saveStyle(style2_2,dashboardCreateCssRule);
      */
    }

    setHeaderHeight(height);
    // set the header_logo_height field in 
    setHeaderLogoHeight(height);


    var padding = Math.abs(parseInt(height.replace('px',''))-parseInt(header_height)+10)
    //console.log('padding',padding);
    setMenuTopPadding(padding);

  });
  /*
  $('#header_logo_bottom').change(function(){
    var style=genStyle('#header-logo','bottom',$('#header_logo_bottom').val() +' !important');
    saveStyle(style,dashboardCreateCssRule);
  });
  */
  $('#header_logo_height').change(function(){
    var height = $('#header_logo_height').val().replace('px','');
    setHeaderLogoHeight(height);
  });
  $('#header_height').change(function(){
    setHeaderHeight($('#header_height').val().replace('px',''));
  });
  $('#header_logo_top').change(function(){
    var style = genStyle('#header-logo','top', $('#header_logo_top').val() +' !important');
    saveStyle(style,dashboardCreateCssRule);
  });
  $('#header_logo_left').change(function(){
    //console.log(style);
    var style=genStyle('#header-logo','left', $('#header_logo_left').val() +' !important');
    saveStyle(style,dashboardCreateCssRule);
  });
  $('#header_logo_secondary').change(function(){
    var style = genStyle('#header-logo-secondary','background-image','url('+$('#header_logo_secondary').val() +') !important');
    saveStyle(style,dashboardCreateCssRule);
  });

  $('#header_menu_top_padding').change(function(){
    //var style = genStyle('#menu','padding-top',$('#header_menu_top_padding').val() +' !important');
    //saveStyle(style,dashboardCreateCssRule);
    setMenuTopPadding($('#header_menu_top_padding').val());
  });
  $('#header_menu_text_color').change(function(){
    //var style = genStyle('#menu','padding-top',$('#header_menu_top_padding').val() +' !important');
    //saveStyle(style,dashboardCreateCssRule);
    setMenuTextColor($('#header_menu_text_color').val());
  });
  $('#header_menu_text_shadow').change(function(){
    //var style = genStyle('#menu','padding-top',$('#header_menu_top_padding').val() +' !important');
    //saveStyle(style,dashboardCreateCssRule);
    setMenuTextShadow($('#header_menu_text_shadow').val());
  });
  $('#header_menu_left_margin').change(function(){
    //var style = genStyle('#menu','padding-top',$('#header_menu_top_padding').val() +' !important');
    //saveStyle(style,dashboardCreateCssRule);
    setMenuLeftMargin($('#header_menu_left_margin').val());
  });


  
  /* Login Button up and hover colors */
  $('#button_up_color').change(function(){
    var selector = 'body.modal .btn-primary, body.modal #modal-box .button, body.modal #login-box .button, #login_form .btn-primary';
    var style = genStyle(selector,'background-color', $('#button_up_color').val());
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'background-image', 'none');
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'border-color',$('#button_up_color').val() +' !important');
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'-webkit-transition','All 0.3s ease');
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'-moz-transition','All 0.3s ease');
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'-o-transition','All 0.3s ease');
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'-ms-transition','All 0.3s ease');
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'transition','All 0.3s ease');
    saveStyle(style,loginCreateCssRule);
  });
  $('#button_hover_color').change(function(){
    var selector = 'body.modal .btn-primary:hover, body.modal #modal-box .button:hover, body.modal #login-box .button:hover, #login_form .btn-primary:hover';

    style = genStyle(selector,'background-color',$('#button_hover_color').val() + ' !important');
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'background-image','none !important');
    saveStyle(style,loginCreateCssRule);
    style = genStyle(selector,'border-color', $('#button_hover_color').val() +' !important');
    saveStyle(style,loginCreateCssRule);
  });


});

function registerLoaded(document) {
}
function loginLoaded(document) {
}
var header_height = 0;
function dashboardLoaded(document) {
  header_height = $(document.getElementById('header')).height();
  console.log('header_height',header_height);
  $('#header_height').val(header_height);
  $('#header_height_val').text(header_height+"px");
}
